<template>
  <div>
    <breadcrumb></breadcrumb>
    <div class="main">
      <el-tabs v-model="activeName" class="mainTabs" @tab-click="handleClick">
        <el-tab-pane label="自营业务服务设置" name="first">
          <div class="main_item">
            <titleBg :title="'自营业务服务'" :marginBottom="'24px'"></titleBg>
            <div class="messageBox">
              <i class="el-icon-warning"></i>
              <div>
                为支持供应商开展自营业务，平台推出自营业务服务，开通即可享受。自营业务服务费的收取按自营流水流水计算，按月支付，平台本身不会收取订单抽成，逾期期不付款将会终止该服务（其他服务不受影响）。对应的流水额度与服务费如下：
              </div>
            </div>
            <el-table :data="tableData" style="width: 100%" id="table">
              <el-table-column
                prop="DailyLimit"
                label="自营流水额度"
                align="left"
              >
              </el-table-column>
              <el-table-column prop="" label="服务费" align="right">
                <template slot-scope="scope">
                  <div class="serviceChargeBox">
                    <input
                      type="text"
                      onkeyup="this.value=this.value.replace(/\D/g,'')"
                      v-model="scope.row.serviceCharge"
                      @blur="updateServiceCharge($event, scope.$index)"
                      class="NoBoderInput"
                      :disabled="inputDisabled"
                    />
                    <i
                      class="iconfont icon-bi"
                      @click="CanInput($event, scope.$index)"
                    ></i>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="自营业务缴费记录" name="second">
          <div class="main_item">
            <paymentRecords></paymentRecords>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import titleBg from "@/components/titleBg.vue";
import paymentRecords from "./sub/paymentRecords.vue";

import httpApi from "@/http";
export default {
  data() {
    return {
      activeName: "first",
      tableData: [
        {
          DailyLimit: "小于100万",
          serviceCharge: "1000",
        },
        {
          DailyLimit: "100万~500万（含500万）",
          serviceCharge: "2000",
        },
        {
          DailyLimit: "500万~1000万（含1000万）",
          serviceCharge: "3000",
        },
        {
          DailyLimit: "1000万以上",
          serviceCharge: "4000",
        },
      ],
      inputDisabled: true,
    };
  },
  methods: {
    handleClick(tab, event) {},
    CanInput(event, index) {
      this.inputDisabled = false;
      this.tableData[index].serviceCharge = "";

      event.currentTarget.previousElementSibling.focus();
      // console.log(event.currentTarget.previousElementSibling.className.indexOf('inputActive'));

      // if(event.currentTarget.previousElementSibling.className.indexOf('inputActive')!=-1){

      //     return
      // }
      event.currentTarget.previousElementSibling.classList.add("inputActive");

      // this.CanInput(event,index)
    },
    updateServiceCharge(event, index) {
      this.tableData[index].serviceCharge = event.target.value;
      // console.log(event.target);
      event.target.classList.remove("inputActive");
      this.inputDisabled = true;
    },
  },
  mounted() {},

  components: {
    breadcrumb,
    titleBg,
    paymentRecords,
  },
};
</script>

<style lang="scss" scoped>
.main {
  .mainTabs {
    ::v-deep .el-tabs__nav {
      margin-left: 38px;
    }

    ::v-deep .el-tabs__nav-scroll {
      background-color: #fff;
    }

    // 标签页切换按钮
    ::v-deep .el-tabs__item {
      height: 50px;
      width: 136px;
      text-align: center;
      padding: 0;
      line-height: 50px;
      font-size: 12px;
      font-weight: bold;
      color: #939393;
    }

    // 下边框
    ::v-deep .el-tabs__nav-wrap::after {
      height: 1px;
      background-color: #f0f0f0;
    }

    // 标签页切换按钮 激活样式
    ::v-deep .el-tabs__item.is-active {
      background-color: #ecf5fe;
      color: #1890ff;
    }

    .main_item {
      padding: 24px 30px;
      background-color: #fff;
      min-height:calc(100vh - 191px);

      .messageBox {
        background-color: #faecd8;
        color: #e6a23c;
        font-size: 12px;
        height: 62px;
        border-radius: 4px;
        display: flex;
        padding: 13px 20px;
        margin-bottom: 16px;
      }

      .el-icon-warning {
        color: #e6a23c;
        font-size: 13.33px;
        margin-right: 11px;
      }

      #table ::v-deep .el-table__cell {
        padding: 17px 37px;
        color: #595959;
        font-size: 12px;
      }

      #table ::v-deep th.el-table__cell {
        background-color: #f0f6fd;
        font-size: 12px;
        font-weight: bold;
        color: #262626;
      }

      .serviceChargeBox {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .NoBoderInput {
          width: 100px;
          text-align: right;
          color: #595959;
          font-size: 12px;
        }

        .icon-bi {
          font-size: 20px;
          color: #e5e5e5;
          margin-left: 4px;
          cursor: pointer;
          transition: 0.2s;

          &:hover {
            color: #262626;
          }
        }
      }

      .inputActive {
        &:focus {
          border: 1px solid #262626;
        }
      }
    }
  }
}
</style>
